<template>
  <div class="container">
    <van-sticky v-if="entityData.selfGoodsAuthority">
      <div class="search-box pad-t-10">
        <van-search v-model="searchValue" shape="round" @change="onChangeVal" @search="onSearch" @clear="onClear" placeholder="请输入商品名称" />
      </div>
      <div class="top-tabs">
        <ul class="flex v-align-c">
          <li class="font-14 flex-item pad-t-9" @click="tabClick(index)"
            v-for="(item, index) in tabs" :key="index">
            <div class="flex flex-center goods-type"
              :class="activeIndex === index ? 'actived' : ''">{{ item }}</div>
          </li>
        </ul>
      </div>
      <div class="status-tabs mar-t-5">
        <ul class="flex v-align-c">
          <li v-for="(item, index) in statusTabs" :key="index" @click="statusTabClick(index)" :class="statusActiveIndex === index ? 'statusActived' : ''">
            <div class="flex flex-center status-tab">{{ item }}</div>
          </li>
        </ul>
      </div>
    </van-sticky>
    <div class="goods-content pad-l-15 pad-r-15 pad-t-10">
      <template v-if="!listNone">
        <div class="list">
          <ul>
            <li  v-for="(item, index) in listData" :key="index" >
              <div class="flex mar-b-12">
                <img v-if="item.goodsImgUrl" :src="item.goodsImgUrl" class="width-84 height-84 mar-r-9 goods-img" mode="aspectFill" alt="">
                <div class="flex-item pad-t-4">
                  <div class="line-2 font-13">{{ item.title }}</div>
                  <div class="flex v-align-c font-15 price-bar mar-t-19">
                    <div class="flex-item">
                      <template v-if="!item.minPrice">
                        <span>￥</span>
                        <span class="price">{{ item.price }}</span>
                      </template>
                      <template v-else>
                        <span v-if="item.minPrice">￥</span>
                        <span v-if="item.minPrice" class="price">{{ item.minPrice }}</span>
                        <label v-if="item.maxPrice">~</label>
                        <span v-if="item.maxPrice">￥</span>
                        <span v-if="item.maxPrice" class="price">{{ item.maxPrice }}</span>
                      </template>
                    </div>
                    <div class="action-btn font-12" @click="actionEls(item, index)"
                      :class="item.type ? 'cancel-btn' : 'add-btn'">{{ item.type ? '取消' : '+添加'}}</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </template>
      <div class="nodata" v-if="listNone">
        <div class="align-c">
          <img v-if="fileSpace" class="width-130 height-113" :src="fileSpace + '/images/shop-b-nodata.png'" alt="">
        </div>
        <div class="font-13 font-color-6 text-align-c mar-t-12">暂未商品</div>
        <!-- <div class="apply-btn" @click="$pt.navigateTo({url: '/pages/personal/live-apply/basic-info/main'})">立即添加</div> -->
      </div>
    </div>
  </div>
</template>
<script>
  import { pagingGoods, getEntityByMemberId } from '@/api/personal'
  export default {
    data() {
      return {
        activeIndex: 0,
        tabs: ['分销商品', '自营商品'],
        statusTabs: ['已审核通过', '需提交审核'],
        statusActiveIndex: 0,
        listData: [],
        listNone: false,
        params: {
          seachType: 1,
          memberId: '',
          title: '',
          currentPage: 1,
          size: 10
        },
        pullLoad: {
          loading: false,
          finished: false
        },
        applyGoodsList: [],
        searchValue: '',
        entityData: {}
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.activeIndex = 0
      this.listNone = false
      this.params.memberId = this.getCustomerId
      this.listData = []
      this.params.currentPage = 1
      this.params.seachType = 2
      this.listSelfEls()
      this.applyGoodsList = []
      this.getEntityByMemberId()
      if (this.$pt.getStorageSync('applyGoodsList')) {
        this.applyGoodsList = this.$pt.getStorageSync('applyGoodsList')
      }
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.listSelfEls()
      }
    },
    methods: {
      getEntityByMemberId() {
        // 用来判断申请店播展示
        getEntityByMemberId({
          memberId: this.getCustomerId
        }).then(response => {
          if (response.isError) return
          this.entityData = response.data
          // this.entityData.selfGoodsAuthority = 0
        })
      },
      tabClick(index) {
        this.activeIndex = index
        this.listNone = false
        this.listData = []
        this.params.currentPage = 1
        switch (index) {
          case 0:
            this.params.seachType = 2
            this.listData = []
            this.pullLoad.finished = false
            this.listSelfEls()
            break
          case 1:
            this.params.seachType = 1
            this.listData = []
            this.pullLoad.finished = false
            this.listSelfEls()
            break
        }
      },
      statusTabClick(index) {
        this.statusActiveIndex = index
      },
      listSelfEls() {
        this.$utils.showToast({
          title: '加载中',
          icon: 'loading'
        })
        this.params.title = this.searchValue
        pagingGoods(this.params).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          response.data.records.forEach(item => {
            item.type = 0
            this.listData.push(item)
          })
          if (this.listData.length !== 0) {
            this.listNone = false
          } else {
            this.listNone = true
            return
          }
          if (this.applyGoodsList.length !== 0) {
            this.applyGoodsList.forEach(goods => {
              this.listData.forEach((item, index) => {
                if (goods.goodsId === item.goodsId) {
                  item.type = 1
                  this.listData.splice(index, 1)
                }
                const changeDataAll = item.type
                this.$delete(item, 'type')
                this.$set(item, 'type', changeDataAll)
              })
            })
          }
          this.params.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            this.pullLoad.finished = true
          }
          if (this.listData.length < 10 && response.data.records.length === 10) {
            this.listSelfEls()
          }
        }).catch(() => {
        })
      },
      actionEls(item, index) {
        console.log(this.listData)
        if (item.type === 1) {
          // 取消
          item.type = 0
          this.applyGoodsList.forEach((goods, goodsIndex) => {
            if (goods.goodsId === item.goodsId) {
              this.applyGoodsList.splice(goodsIndex, 1)
            }
          })
        } else {
          // 添加
          item.type = 1
          this.listData.splice(index, 1)
          this.applyGoodsList.push(item)
        }
        const changeDataAll = item.type
        this.$delete(item, 'type')
        this.$set(item, 'type', changeDataAll)
        this.$pt.setStorageSync('applyGoodsList', this.applyGoodsList)
        setTimeout(() => {
          this.$utils.showToast({ title: '操作成功' })
        }, 300)
      },
      onChangeVal(e) {
        this.searchValue = e.mp.detail
        if (this.searchValue === '') {
          this.params.currentPage = 1
          this.listData = []
          this.pullLoad.finished = false
          this.listSelfEls()
        }
      },
      onSearch(e) {
        this.searchValue = e.mp.detail
        this.params.currentPage = 1
        this.listData = []
        this.pullLoad.finished = false
        this.listSelfEls()
      },
      onClear() {
        this.searchValue = ''
        this.params.currentPage = 1
        this.listData = []
        this.pullLoad.finished = false
        this.listSelfEls()
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  background: #fff;
  min-height: calc(100vh);
  .search-box {
    width: 100%;
    background: white;
    // 对搜索框进行改造
    /deep/ .van-search{
      background: unset !important;
    }
    /deep/ .van-search--show-action {
      background: unset !important;
      padding-right: unset;
    }
    /deep/ .van-cell {
      background: #f4f4f4;
      border-radius: 25px;
    }
    /deep/ .van-search__action {
      background: white;
      font-size: 20px;
      color: #333333;
      font-weight: bold;
    }
  }
  .top-tabs{
    width: 100%;
    // position: fixed;
    // left: 0;
    // top: 0;
    // z-index: 50;
    background: #fff;
    ul{
      border-bottom: #f4f4f4 1px solid;
      // border-top: #e9e9e9 1px solid;
      li{        
        .goods-type{
          height: 40px;
          position: relative;
          color: #999;
          &.actived{
            color: #333;
          }
          &.actived:after{
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 60px;
            height: 2px;
            margin-left: -30px;
            background: #333;
          }
        }
      }
    }
  }
  .status-tabs{
    background: #fff;
    padding: 20rpx;
    ul{
      width: 60%;
      margin: 0 auto;
      li{
        flex: 1;
        padding: 10rpx 40rpx;
        border: 1px solid #ddd;
        font-size: 20rpx;
        background: #fff;
      }
      &>li:nth-child(1) {
        border-top-left-radius: 60rpx;
        border-bottom-left-radius: 60rpx;
      }
      &>li:nth-child(2) {
        border-left: 0;
        border-top-right-radius: 60rpx;
        border-bottom-right-radius: 60rpx;
      }
      .statusActived {
        background: #333333;
        color: #fff;
      }
    }
  }
  .goods-content{
    p{
      margin: 0;
      padding: 19px 0 8px;
      font-size: 11px;
      color: #999;
      line-height: 1.3;
    }
    .list{
      li{
        .goods-img{
          border-radius: 10px;
        }
        .line-2{
          height: 36px;
        }
        .price-bar{
          color: #E84747;
        }
      }
    }
  }
  .action-btn{
    border-radius: 20px;
    padding: 1px 13px;
    display: inline-block;
    color: #333;
    &.add-btn{
      background: #ffd800;      
    }
    &.cancel-btn{
      background: #e8e8e8;      
    }
  }
  .nodata{
    padding-top: 100px;
    .apply-btn{
      width: 155px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border-radius: 17px;
      background: #ffe200;
      margin: 80px auto 0;
      font-weight: bold;
    }
  }
}
</style>
